<template>
    <div class="tableContainer">
        <el-form :inline="true"  class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="">
                <el-input class="elInput" v-model="key" placeholder="输入菜单名称"></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button class="elBtn" type="primary" @click="selectMenu">查询</el-button>
                <el-button class="elBtn" type="primary" @click="openDialog('','',1)">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" height="94%" row-key="id" border :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"  style="width: 100%;overflow:auto;" >
            <el-table-column prop="name" label="菜单名称" min-width="15%" align="left"> </el-table-column>
            <el-table-column prop="url" label="菜单路径" min-width="35%" align="center"></el-table-column>
            <el-table-column prop="type" label="类型" min-width="15%" align="center" :formatter="this.$common.typeFormat"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="20%" align="center" :formatter="this.$common.dateFormat"></el-table-column>
            <el-table-column prop="op" label="操作" align="center" min-width="20%">
                <template slot-scope="scope">
                    <el-button class="elBtn"  type="primary" size="mini" icon="edit"  @click="openDialog(scope.$index, scope.row,2)">修改</el-button>
                    <el-button size="mini" icon="delete" type="danger" @click="openDialog(scope.$index, scope.row,3)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" center @close="clearForm">
            <el-form :model="form" ref="form">
                
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="name" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                    <el-input class="elInput" v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级菜单" :label-width="formLabelWidth" prop="supId">
                    <!-- <el-input class="elInput"  v-model="form.supId" autocomplete="off"></el-input> -->
                    <select-tree v-model="form.supId"  placeholder="请选择" :options="allMenuList" />
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth" prop="type">
                    <!-- <el-input class="elInput"  v-model="form.type" autocomplete="off"></el-input> -->
                    <el-radio class="elRadio" v-model="form.type" label="0" text-color="#ccc">目录</el-radio>
                    <el-radio class="elRadio" v-model="form.type" label="1" text-color="#ccc">菜单</el-radio>
                </el-form-item>
                <el-form-item label="菜单路径" :label-width="formLabelWidth" prop="url" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                    <el-input class="elInput" v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" :label-width="formLabelWidth" prop="icon">
                    <el-input class="elInput" v-model="form.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth" prop="description">
                    <el-input-number  v-model="form.orderNum"  :min="1"  label="描述文字"></el-input-number>
                </el-form-item>
                <!-- <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="status" active-color="#13ce66" inactive-color="#ccc"  inactive-text="禁用" active-text="启用">
                    </el-switch>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="saveMenu">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确定删除这条菜单信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="doDelete">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    

</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    data(){
        return {
            centerDialogVisible:false,
            dialogFormVisible:false,
            menuId:"",
            key:"",
            dialogTitle:"",
            currpage:1, // 当前页
            pagesizes:[10,15,20,25],
            pagesize:10,  // 每页条数
            tableData:[],
            totalNum:10,
            allMenuList:[],
            form:{
                id:"",
                name:"",
                supId:"0",
                url:"",
                type:"1",
                orderNum:1,
                icon:""
            },
            formLabelWidth:"20%"
        }
    },
    created(){
        
        this.selectAllMenu()
        this.selectMenu()
    },
    methods:{
        // 打开对话框
        openDialog(index,row,type){
            if(type == 3){ // 删除
                this.centerDialogVisible = true
                this.menuId = row.id
            }else if(type == 2){ // 修改
               
                this.menuId = row.id
                this.selectById()
                this.dialogTitle = "修改菜单信息"
            }
            else if(type == 1){ // 新增
                
                this.dialogFormVisible = true
                this.dialogTitle = "新增菜单信息"
            }
        },
        // 查询所有菜单
        selectAllMenu(){
            // 获取所有菜单数据
            this.$common.selectAllMenu(res => {
                this.allMenuList = this.$common.dataFormat(res.data.data)
                
                this.allMenuList.forEach(el => {
                    el.id = el.menuId
                })
                this.allMenuList.unshift({label:"请选择",id:"0"})
            })
        },
        // 查询所有菜单 -- 分页
        selectMenu(){
            const params = {
              key:this.key
            }
            this.$api.selectMenu(params)
            .then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.tableData = result.data.data
                    }
                })
            })
        },
        // 根据id查询
        selectById(){
            this.$api.selectMenuById({params:{id:this.menuId}})
            .then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.form = result.data.data
                        _this.form.type = _this.form.type.toString()
                        _this.dialogFormVisible = true
                    }
                })
            })
        },
        // 保存菜单的修改及新增
        saveMenu(){
            // 验证表单
            this.$refs['form'].validate((valid) => {
                if(valid){
                    this.form.type = parseInt(this.form.type)
                    if(!this.form.id){ // 新增
                        this.$api.addMenu(this.form)
                        .then(result=>{
                            var _this = this
                            this.$common.filterLogin(result,_this,()=>{
                                if(result.data.success){
                                    this.successFun(result.data.message)
                                }
                            })
                        })
                    }else{ // 修改
                        this.$api.updateMenu(this.form)
                        .then(result=>{
                            var _this = this
                            this.$common.filterLogin(result,_this,()=>{
                                if(result.data.success){
                                    this.successFun(result.data.message)
                                }
                            })
                        })
                    }
                }
            })
            
        },
        // 删除菜单
        doDelete(){
            this.$api.deleteMenu({params:{id:this.menuId}})
            .then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        this.successFun(result.data.message)
                    }else{
                        this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                    }
                })
            })
        },
        successFun(message){
            this.selectMenu()
            this.clearForm()
            this.selectAllMenu()
            this.$message({center: true,message:message?message:"操作成功",type: 'success'});
        },
        // 清楚表单
        clearForm(){
            this.dialogFormVisible = false
            this.centerDialogVisible = false
            // 清楚表单数据
            for(let item in this.form){
                this.form[item] = ""
            }
            this.form.supId = "0"
            this.form.type = "1"
            this.$refs['form'].clearValidate()
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectMenu()
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectMenu()
            
        }
    },
    components: {
      'select-tree': Treeselect
    }
}
</script>

<style lang="scss" scoped>
.tableContainer{
    height: 97%;
    padding: 10px;
    background: #FDFDFD;
    // background: transparent;
    border-radius: 5px;
    // box-shadow: 5px 5px 4px rgba(204, 204, 204, 0.5)
    .el-pagination.is-background{
        text-align: right;
        padding:10px 5px;
    }
    .el-table,.el-table th, .el-table tr{
        background: transparent !important;
    }
}
</style>